@import "./mixin.scss";
.diy-wrapper {
    overflow: hidden;
    transition: height ease-in-out 0.3s;
    &.show {
        height: 0px;
    }
    &.edit {
        height: 300px;
    }
    .content-wrapper {
        display: flex;
        justify-content: center;
        .page-list {
            width: 1200px;
            display: flex;
            justify-content: center;
            padding: 20px 0;
            @include scrollStyle;
            .item {
                margin: 0 30px;
                width: 78px;
                height: 36px;
                line-height: 36px;
                text-align: center;
                color: #ffffff;
                background-size: 100% 100%;
                background-image: url("~@/assets/diy/bg-button-2.png");
                &.selected {
                    background-image: url("~@/assets/diy/bg-button-1.png");
                }
            }
        }
        .image-list {
            display: flex;
            overflow-x: auto;
            overflow-y: hidden;
            font-size: 0;
            height: 224px;
            @include scrollStyle;
            .item {
                height: 180px;
                margin: 0 16px;
                background-size: contain;
                background-repeat: no-repeat;
                background-position: center center;
                .title {
                    height: 36px;
                    line-height: 36px;
                    text-align: center;
                    color: #ffffff;
                    font-size: 18px;
                }
                .image {
                    height: 100%;
                }
            }
        }
    }
}
.diy-detail {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 1872px;
    margin: 28px auto 0;
    &.diy-dzh {
        > .item {
            width: 78px !important;
            height: 54px !important;
        }
    }
    .diy-item {
        box-sizing: border-box;
        padding: 5px;
        width: 78px !important;
        height: 54px !important;
        transform: none !important;
        transition: none !important;
        &.level {
            position: relative;
            z-index: 99;
        }
        &.auto {
            height: auto !important;
        }
        .diy-content {
            position: relative;
            width: 100%;
            height: 100%;
            border-radius: 8px;
            border: 2px dashed rgba(156, 156, 156, 0);
            .border-echart {
                margin-top: -2px;
                margin-left: -2px;
                background-color: #1748ae00;
                border-radius: 4px;
            }
            .close-button {
                display: none;
                position: absolute;
                top: 10px;
                left: 8px;
                width: 30px;
                height: 30px;
                z-index: 999;
            }
            &.edit {
                border: 2px dashed rgba(156, 156, 156, 0.4);
                .border-echart {
                    background-color: #1748aeaa;
                }
                .close-button {
                    display: block;
                }
            }
        }
    }
}
.outer-wrapper {
    position: relative;
    &.skin-1 {
        background-image: url("~@/assets/images/skin/1-main-bg.jpg");
    }
    &.skin-2 {
        background-image: url("~@/assets/images/skin/2-main-bg.png");
    }
    background-size: 100% 100%;
    width: 1920px;
    height: 1080px;
    overflow: hidden;
}
.echarts-outer-wrapper {
    background-size: 100% 134px;
    &.width-410 {
        background-image: url(~@/assets/images/echart-bg-410.png);
        background-size: 100% 100px;
    }
    &.width-620 {
        background-image: url(~@/assets/images/echart-bg-620.png);
    }
    &.width-1250 {
        background-image: url(~@/assets/images/echart-bg-1250.png);
    }
    &.flex-cloumn {
        display: flex;
        flex-direction: column;
        .components-title {
            flex: 0 0 54px;
        }
        .flex1 {
            flex: 1;
        }
    }
    background-position: center bottom;
    background-size: 100% 134px;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    .echart-dw {
        position: absolute;
        color: rgba(179, 211, 229, 1);
        font-size: 14px;
        height: 54px;
        line-height: 54px;
        top: 0;
        right: 40px;
        display: flex;
        align-items: center;
        &.yj {
            color: rgba(18, 242, 228, 1);
        }
        .echart-dw-icon {
            margin-right: 6px;
        }
    }
}
.echart-detail-modal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-150px, -100px);
    display: flex;
    flex-direction: column;
    color: #ffffff;
    border-radius: 10px;
    height: 200px;
    width: 300px;
    background-color: rgba(37, 110, 218, 1);
    .title {
        height: 40px;
        line-height: 40px;
        text-align: center;
    }
    .close {
        position: absolute;
        top: 10px;
        right: 20px;
    }
    .detail-list {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        padding: 4px 8px;
        border-bottom: 1px solid rgba(174, 233, 250, 0.39);
        &.center {
            text-align: center;
        }
        &:last-child {
            border: none;
        }
        .item {
            flex: 1;
            color: #ffffff;
            &.hang {
                flex: 0 0 100%;
                width: 100%;
                margin-bottom: 8px;
            }
            &.money {
                color: #fbe671;
            }
        }
    }
    .detail-list-wrapper {
        flex: 1;
        overflow-y: auto;
        @include scrollStyle;
    }
}
.echart-tab-wrapper {
    height: 60px;
    display: flex;
    align-items: center;
    .tabs {
        display: flex;
        height: 32px;
        line-height: 32px;
        background: linear-gradient(180deg, rgba(180, 193, 255, 0.48) 0%, rgba(41, 50, 93, 0) 100%);
        border-radius: 20px;
        overflow: hidden;
        .tab-item {
            width: 80px;
            flex: 0 0 80px;
            text-align: center;
            color: #ffffff;
            font-size: 17px;
            cursor: pointer;
        }
        .select {
            background: linear-gradient(180deg, rgba(180, 193, 255, 0.48) 0%, rgba(41, 50, 93, 0) 100%);
            border-radius: 20px;
        }
    }
}
.echart-select-wrapper {
    width: 147px;
    height: 30px;
    border: 1px solid #8da5ff;
    background: linear-gradient(0deg, #001579 0%, #0955ab 100%);
    border-radius: 16px;
    color: #fff;
    text-align: center;
    line-height: 30px;
    font-size: 18px;
    option {
        background: rgba(14, 78, 168, 1);
    }
}
